<template>
  <el-dialog
    :title="dialogTableTitle"
    :close-on-click-modal="false"
    :visible.sync="addMenuVisible"
    :show-close="false"
    custom-class="dialogTableClassEdit"
    destroy-on-close
  >
    <el-row style="margin-top: 15px">
      <el-col :span="8" class="menuList">
        <el-input
          placeholder="输入关键字进行过滤"
          v-model="filterText"
        ></el-input>
        <el-card class="menuTree">
          <el-tree
            class="filter-tree"
            v-loading="treeData.length < 2"
            :data="treeData"
            node-key="Id"
            highlight-current
            :props="defaultProps"
            :filter-node-method="filterNode"
            ref="menuTree"
            @node-click="getNodeData"
            :default-expanded-keys="menuNodeKey"
            :current-node-key="menuNodeKeyStr"
            default-expand-all
          >
          </el-tree>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card class="box-card">
          <span style="font-size: 18px">菜单</span>
          <el-form
            :label-position="'right'"
            label-width="150px"
            :rules="rules"
            :model="form"
            ref="form"
            class="menuBox"
          >
            <el-form-item label="菜单名称" prop="menuName">
              <el-input
                v-model="form.menuName"
                placeholder="请输入菜单名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="父级节点(左侧筛选)">
              <el-input
                v-model="form.menuParentName"
                disabled
                placeholder="请选择父级节点(空为一级目录)"
              ></el-input>
            </el-form-item>
            <el-form-item label="菜单链接" prop="menuUrl">
              <el-input
                v-model="form.menuUrl"
                placeholder="请输入菜单链接"
              ></el-input>
            </el-form-item>
            <el-form-item label="菜单标识" prop="menuRemark">
              <el-input
                v-model="form.menuRemark"
                placeholder="请输入菜单标识"
              ></el-input>
            </el-form-item>

            <!-- <el-form-item label="排序">
                      <el-input v-model="form.orderby" placeholder="请输入排序"></el-input>
                    </el-form-item> -->
            <el-form-item style="margin-bottom: 0px">
              <el-button type="primary" @click="save('form')">保存</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <!-- <el-button type="primary" @click="save('updateForm')">{{isAdd?'添加':'修改'}}</el-button> -->
      <el-button type="primary" @click="back()">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
  //import引入的组件需要注入到对象中才能使用
  name: '',
  components: {},
  data () {
    //这里存放数据
    return {
      filterText: "",
      treeData: [],
      form: {},
      defaultProps: {
        children: 'ChildList',
        label: 'MenuName'
      },
      menuNodeKey: [],
      menuNodeKeyStr: '',
      rules: {
        menuName: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
        menuUrl: [{ required: true, message: '请输入菜单链接', trigger: 'blur' }],
        //   parent_id:[{ required: true, message: '请选择父级节点', trigger: 'change'}],
        menuRemark: [{ required: true, message: '请输入菜单标识', trigger: 'blur' }],
      },
    };
  },
  props: {
    dialogTableTitle: {
      type: String,
      default: "新增"
    },
    isAdd: {
      type: Boolean,
      default: true
    },
    isAddChild: {
      type: Boolean,
      default: true
    },
    addMenuVisible: {
      type: Boolean,
      default: false
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    save () { },
    back () {
      this.$emit('closeDialog')
    },
    getNodeData (data) {

    },
    filterNode (value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () { }, //生命周期 - 创建之前
  beforeMount () { }, //生命周期 - 挂载之前
  beforeUpdate () { }, //生命周期 - 更新之前
  updated () { }, //生命周期 - 更新之后
  beforeDestroy () { }, //生命周期 - 销毁之前
  destroyed () { }, //生命周期 - 销毁完成
  activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
//@import url(); 引入公共css类
<style  scoped>
</style>